<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Vue test</title>

    <!-- Bootstrap
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <style>
        .active{
            border: 1px solid red;
        }
    </style>

</head>
<body>
    <div id = "app" class="app">
        <!-- 事件绑定 -->
        <div v-if = "learnvue === 1">
            <h2 v-text = "message+'!'">深圳</h2>
            <h2 v-text = "info+'?'">深圳</h2>
            <h2 >深圳{{message}}</h2>
            <p v-html = "content"></p>
            <p v-text = "content"></p>
            <input type="button" value="v-on指令" v-on:click = "DoIt">
            <input type="button" value="v-on简写@" @click = "DoIt">
            <input type="button" value="@双击" @dblclick = "DoIt">
            <h1>{{school.name}}，{{school.mobile}}</h1>
            <ul>
                <li v-for="(campus,i) in campus"> {{campus}}</li>
            </ul>
            <h2 @click="Change">{{food}} </h2>
            <!-- 事件绑定实例 计数器 -->
            <h1><计数器></h1>
            <div class="input-num">
                <button @click="sub">-</button>
                <span>{{num}}</span>
                <button @click="add">+</button>
            </div>
        </div>
        <div v-if = "learnvue === 2">
            <input type="button" value="切换" @click="switchisShow">
            <img src="https://www.hualigs.cn/image/6055fe6b0e69a.jpg" width="100rpx" v-show="isShow && age>=18">
            <p v-if="age>=18">18岁了！</p>
            <br> <img v-bind:src = "imgSrc" alt =""><br>
            <img :src = "imgSrc" alt ="" 
                :title="imgTitle+'!!!!'" 
                :class="isActive?'active':'' " 
                @click="toggleActive">
            <br>
            <img :src = "imgSrc" alt ="" 
                :title="imgTitle+'!!!!'" 
                :class="{active:isActive}" 
                @click="toggleActive">
            <br>
        </div>
    </div>
    <div id="mask" title="wallpaper">
        <a href="javascipt:void(0)"  @click="prev" v-show="index!=0"> <- </a>
        <img width="200px" :src="imgArr[index]" alt="" >
        <a href="javascipt:void(0)"  @click="next" v-show="index<imgArr.length-1"> -> </a>
        <ul>
            <li v-for = "(item,index) in arr" :title="item">
                city: {{index+1}} - {{item}}  
            </li>
            <button @click="add">添加对象</button>
            <li v-for = "(item,index) in objArr" :title="item.name">
                {{index}} : {{item.name.toUpperCase()}}
            </li>
            <button @click="remove">删除对象</button>
        </ul>
        <input type="button"  @click="domask('Yeah!',2)" value="测试v-on输入函数">
        <input type="text"  @keyup.tab="sayHi" value="tab 是进入这里才触发">
        <input type="text"  @keyup.enter="sayHi">
        <!-- br 换行 -->
        <br>
        <input type="text"  v-model="message" @keyup.enter="getMessage">
        <h2>{{message}}</h2>
    </div>





    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el : "#app",     //id选择器
            // el : ".app",    //class选择器
            // el : "span",
            data:{
                learnvue:3,
                // 1
                message: "Hello Vue!!",
                num:1,
                food: "Water",
                info: "测试v-text",
                content:"<a href='http://www.itheima.com'>河马程序员</a> ",
                school: {
                    name : "小明",
                    mobile:"13178772468"
                },
                campus:["beijing","shanghai","guangzhou","shenzhen"],
                //2
                isShow: false,
                age : 17,
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"测试图2标题",
                isActive:false,
            },
            methods:{
                DoIt:function(){
                    alert("do it");
                },
                Change:function(){
                    this.food +=" good!"
                },
                add:function(){
                    if(this.num<10){
                        this.num ++;
                    }
                    else alert("憋点了！");
                },
                sub:function(){
                    if(this.num>0){
                        this.num --;
                    }
                    else alert("憋点了！");
                },
                switchisShow:function(){
                    this.isShow = !this.isShow;
                    this.age ++;
                },
                toggleActive:function(){
                    this.isActive = !this.isActive;
                },

            }
        });
        var mask = new Vue({
            el:"#mask",
            data:{
                message:"hello!",
                arr:["beijing","shanghai","guangzhou","shenzhen"],
                objArr:[
                    {
                        name:"zozo",
                        
                    },
                    {
                        name:"jojo",
                        
                    },
                ],
                imgArr:[
                    "./picture/1.jpg",
                    "./picture/2.jpg",
                    "./picture/3.jpg"
                ],
                index:0,
            },
            methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                },
                getid:function(){
                    this.id++;
                },
                add:function(){
                    this.objArr.push({ name:"zOzo"});
                },
                remove:function(){
                    this.objArr.shift();
                },
                domask:function(p1,p2){
                    console.log(p1);
                    console.log(p2);
                    console.log("完成");
                },
                sayHi:function(){
                    alert("Hello!");
                },
                getMessage:function(){
                    alert(this.message);
                }
            },
        })
   </script>
</body>


</html>

